<template>
    <div>
        <div style="margin-bottom: 30px">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>新闻后台管理</el-breadcrumb-item>
                <el-breadcrumb-item>轮播图片</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px"
            >新增轮播图片<i class="el-icon-circle-plus-outline"></i
            ></el-button>
        </div>
        <el-table
                :data="tableData"
                border
                stripe
                :header-cell-style="{'text-align':'center'}"
        >
            <el-table-column type="index" label="ID" width="80" align="center"
            ></el-table-column>
            <el-table-column
                    prop="img"
                    label="图片"
                    width="180"
                    align="center"
            >
                <template v-slot="scope">
                    <el-image
                            style="width: 120px; height: 60px;border-radius: 10px"
                            :src="scope.row.img"
                            :preview-src-list="[scope.row.img]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="图片描述"
                    width="400"
                    align="center"
            ></el-table-column>
            <el-table-column
                    prop="imgurl"
                    label="图片地址"
                    width="400"
                    align="center"
            ></el-table-column>
            <el-table-column label="操作" width="300" align="center">
                <template v-slot="scope">
                    <el-button type="success" size="small" @click="handleEdit(scope.row)"
                    >编辑 <i class="el-icon-edit"></i
                    ></el-button>
                    <el-popconfirm
                            class="ml-5"
                            confirm-button-text="确定"
                            cancel-button-text="我再想想"
                            icon="el-icon-info"
                            icon-color="red"
                            title="您确定删除吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button
                                type="danger"
                                size="small"
                                style="margin-left: 15px"
                                slot="reference"
                        >删除 <i class="el-icon-remove-outline"></i
                        ></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[3, 5, 7, 9]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            >
            </el-pagination>
        </div>
        <el-dialog title="新增轮播图片" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form" label-width="80px" size="small">
                <el-form-item label="新闻封面">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8082/file/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                    >
                        <img v-if="img" :src="img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description" placeholder="请输入描述"></el-input>
                </el-form-item>
                <el-form-item label="跳转链接">
                    <el-input v-model="form.imgurl" placeholder="请输入跳转链接"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getImgList, addOrUpdateImg, deleteImg} from '@/api/Img'

export default {
    data() {
        return {
            dialogFormVisible: false,
            tableData: [],
            total: 0,
            pageNum: 1,
            pageSize: 9,
            imgLoaded: false,
            img: '',
            form: {
                img: '',
                imgurl: '',
                description: "",
            },
        }
    },
    created() {
        this.getAllImgList()
    },
    methods: {
        handleAvatarSuccess(res) {
            this.img = res
        },
        getAllImgList() {
            getImgList(this.pageNum, this.pageSize).then(res => {
                this.tableData = res.records
                this.total = res.total
            })


        },
        del(id) {
            deleteImg(id).then(res => {
                if (res) {
                    this.$message.success("删除成功");
                    this.getAllImgList();
                } else {
                    this.$message.error("删除失败");
                }
            })
        },
        save() {
            this.form.img = this.img;
            console.log(this.form)
            addOrUpdateImg(this.form).then(res => {
                if (res) {
                    this.$message.success("保存成功");
                    this.dialogFormVisible = false;
                    this.getAllImgList();
                } else {
                    this.$message.error("保存失败");
                }
            });
        },
        handleEdit(row) {
            this.form = Object.assign({}, row);
            this.img = this.form.img
            this.dialogFormVisible = true;
        },
        handleAdd() {
            this.form = {};
            this.img = '';
            this.dialogFormVisible = true;

        },
        handleSizeChange(pageSize) {
            console.log(pageSize);
            this.pageSize = pageSize;
            this.getAllImgList();
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum);
            this.pageNum = pageNum;
            this.getAllImgList();
        },
    }
}
</script>

<style scoped>
.avatar-uploader {
    width: 240px;
    height: 140px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 138px;
    height: 138px;
    line-height: 138px;
    text-align: center;
}

.avatar {
    width: 240px;
    height: 140px;
    display: block;
}
</style>
